<template>
  <div class="container">
        <span style="span-size:15px;span-family:'Microsoft YaHei'">
            患者信息查询</span>&nbsp;
    <el-row :gutter="2">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span style="color:red">*</span>
          <span style="span-size:13px;span-family:'Microsoft YaHei'">病 历 号 :</span>&nbsp;
          <el-input placeholder="病历号" style="width: 110px" again="left" v-model="keywords">
          </el-input>
        </div>
      </el-col>

      <el-col :span="5">
        <div class="grid-content bg-purple">
          <el-button type="primary" style="margin-left: 3px"
                     @click="gosearch"><el-icon><Search /></el-icon> 搜索
          </el-button>
        </div>
      </el-col>
    </el-row>

    <br>
    <span style="span-size:15px;span-family:'Microsoft YaHei'">
            患者信息确认</span>&nbsp;

    <el-row :gutter="2">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <span style="span-size:13px;span-family:'Microsoft YaHei'">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</span>&nbsp;
          <el-input placeholder="姓名" style="width: 110px" again="left" readonly
                    v-model="info.realname">
          </el-input>
        </div>
      </el-col>

      <el-col :span="7">
        <div class="grid-content bg-purple">
          <span style="span-size:13px;span-family:'Microsoft YaHei'">身份证号:</span>
          <el-input placeholder="身份证号" style="width: 180px" readonly
                    v-model="info.idnumber"></el-input>
        </div>
      </el-col>

      <el-col :span="9">
        <div class="grid-content bg-purple">
          <span style="span-size:13px;span-family:'Microsoft YaHei'">家庭住址:</span>
          <el-input placeholder="家庭住址" style="width: 330px" readonly
                    v-model="info.address"></el-input>
        </div>
      </el-col>
    </el-row>

    <!-- :data="categories"  -->
    <el-main class="gao_cate_mana_main">
            <span style="span-size:15px;span-family:'Microsoft YaHei'">
                患者消费信息</span>&nbsp;
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange" v-loading="loading">

        <el-table-column
            type="selection"
            width="55" align="left"
            :selectable="checkSelectable"
        >
        </el-table-column>

        <!-- v-if='false' -->


        <el-table-column
            label="病历号"
            prop="MedicalID"
            width="120" align="left">
        </el-table-column>

        <el-table-column
            label="项目名称"
            prop="Name"
            width="120" align="left">
        </el-table-column>

        <el-table-column
            label="单价"
            prop="Price"
            width="120" align="left">
        </el-table-column>

        <el-table-column
            label="数量"
            prop="Num"
            width="120" align="left">
        </el-table-column>

        <el-table-column
            label="开立时间"
            prop="CreationTime"
            width="220" align="left">
        </el-table-column>


        <el-table-column
            label="状态"
            prop="State"
            width="120" align="left">
          <template #default="scope">
            <span v-if="scope.row.State==1">已开立未缴费</span>
            <span v-if="scope.row.State==2">已收费</span>
            <span v-if="scope.row.State==3">已执行</span>
          </template>
        </el-table-column>
      </el-table>

      <br>
      <!--:disabled="selItems.length==0" -->
      <el-button type="primary" icon="el-icon-goods"
                 style="margin-top: 10px;width: 100px;"
                 @click="chargeAll" v-if="tableData.length>0">收费结算
      </el-button>
      <el-dialog title="收费结算" v-model="showChargeDialog" width="50%" center>
        <div>
          <h3>请确认以下收费项目：</h3>
          <el-table :data="selItems" border>
            <el-table-column prop="Name" label="项目名称" />
            <el-table-column prop="Price" label="金额" />
          </el-table>
          <p style="margin-top: 20px; font-weight: bold;">
            总金额：{{ totalAmount }} 元
          </p>
        </div>

        <!-- 新增：支付方式选择 -->
        <div class="charge-form">
          <el-form :model="chargeForm" label-width="120px">
            <el-form-item label="支付方式">
              <el-radio-group v-model="chargeForm.paymentMethod">
                <el-radio label="cash">现金</el-radio>
                <el-radio label="wechat">微信</el-radio>
                <el-radio label="alipay">支付宝</el-radio>
                <el-radio label="card">银行卡</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="实收金额">
              <el-input v-model.number="chargeForm.receivedAmount" placeholder="请输入实收金额"
                        @input="calculateChange" @blur="calculateChange"></el-input>
            </el-form-item>

            <el-form-item label="找零金额" :label-class="changeClass">
              <el-input v-model.number="chargeForm.changeAmount" readonly :disabled="true"
                        placeholder="自动计算"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <!-- 对话框底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="showChargeDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmCharge">确认收费</el-button>
        </span>
      </el-dialog>
    </el-main>
  </div>
</template>


<script setup>
import {computed, onMounted, ref} from 'vue'
import service from '@/utils/request'
import {ElMessage} from "element-plus";

let keywords = ref('')      //要查询的关键字：病历号
let tableData = ref([])     //患者消费信息
let info = ref({realname:'',idnumber:'',address:''})    //患者的确认信息
let tableInfo = ref([])
let selItems=ref([])
let totalAmount=0
let isValid=false;

let showChargeDialog=ref(false)

let chargeForm = ref({
  paymentMethod: 'cash', // 默认支付方式为现金
  receivedAmount: 0,     // 实收金额
  changeAmount: 0        // 找零金额
});

function calculateChange(){
  if(chargeForm.value.receivedAmount>=totalAmount){
    chargeForm.value.changeAmount=chargeForm.value.receivedAmount-totalAmount;
    isValid=true;
  }else{
    chargeForm.value.changeAmount=0;
    isValid=false;
  }
}

function checkSelectable(row){
  if(row.State==1){
    return row;
  }
}

function gosearch(){
  //根据mid（keywords）查询checkapply and price
  service.get("/check/getbymid?mid="+keywords.value).then(
      res=>{
        // console.log(res.data)
        tableData.value = res.data.list
        info.value.realname = res.data.info.realname
        info.value.address =  res.data.info.homeaddress
        info.value.idnumber =  res.data.info.idnumber
      }
  )
}

function handleSelectionChange(selected){
  selItems.value=selected;
}

function chargeAll(){
  totalAmount=0;
  showChargeDialog.value=true;
  // console.log(selItems.value)
  for(let i=0;i<selItems.value.length;i++){
    totalAmount+=selItems.value[i].Price*selItems.value[i].Num;
  }
}

function confirmCharge(){
  if(isValid){
    let count=0;
    for(let i=0;i<selItems.value.length;i++){
      console.log(selItems.value[i].ID)
      selItems.value[i].State=2;
      service.post("/check/saveOrUpdate?id="+selItems.value[i].ID).then(
          res => {
            count++;
            if(count==selItems.value.length){
              ElMessage.success('付费成功');
              showChargeDialog.value=false;
            }
          })
    }
  }else{
    ElMessage.error('实收金额不能小于总金额');
  }
}

onMounted(() => {
  // console.log("组件挂载成功")
})
</script>